<template>
  <div class="login">
    <div class="login-title">
      <h1>办公软件</h1>
    </div>
    <div class="login-card">
      <div class="login-card-samll">
        <div class="card-title">
          <div class="title-avatar">
            <img src="./../../assets/image/login.png" />
          </div>
          <div class="title-text">
            <span>用户登陆</span>
          </div>
        </div>
        <div class="div-line"></div>
        <div class="contain">
          <el-form ref="form" :rules="rules" :model="form" label-width="80px" size="small">
            <el-form-item label="用户名" prop="name">
              <el-input
                v-model="form.name"
                placeholder="请输入用户名"
                prefix-icon="el-icon-ali-bussiness-man-fill"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="pwd">
              <el-input
                v-model="form.pwd"
                placeholder="请输入密码"
                prefix-icon="el-icon-ali-password"
                show-password
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">登陆</el-button>
              <el-button @click="onReset">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { accountLogin } from "../../api/getData";
export default {
  data() {
    return {
      form: {
        name: "",
        pwd: ""
      },
      rules: {
        name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        pwd: [{ required: true, message: "请输入密码", trigger: "blur" }]
      }
    };
  },
  methods: {
    onSubmit: async function() {
      let rsp = await accountLogin(this.form.name, this.form.pwd)
    },
    onReset: function() {
      this.form.name = ""
      this.form.pwd = ""
    }
  }
};
</script>

<style lang="stylus" rel="stylesheet/stylus">
.login {
  margin: 160px 0;
  text-align: center;

  .login-title {
    font-family: 'Courier New', Courier, monospace;
    font-size: 40px;
    color: white;
  }

  .login-card {
    display: inline-block;
    margin-top: 40px;
    width: 500px;
    height: 260px;
    background: rgba(63, 178, 231, 0.5);
    border-radius: 5px;
    overflow: hidden;

    .login-card-samll {
      margin: 20px;
      width: 460px;
      height: 220px;
      background: rgba(255, 255, 255, 0.7);
      font-size: 0;

      .card-title {
        text-align: left;

        .title-avatar {
          display: inline-block;
          margin: 10px 10px 0px 20px;
        }

        .title-text {
          display: inline-block;
          font-size: 25px;
          font-style: normal;
          font-family: 'Courier New', Courier, monospace;
          vertical-align: top;
          margin: 20px 0px 0px 0px;
        }
      }

      .div-line {
        display: inline-block;
        background: #aaaaaa;
        width: 92%;
        height: 1px;
        margin: 4px;
        font-size: 2px;
      }

      .contain {
        display: inline-block;
        margin-top: 10px;
      }
    }
  }
}
</style>
